<template>
  <div>
    <el-card class="box-card" style="margin: 20px 30px;">
      <el-form :inline="true" class="demo-form-inline"  :disabled="disabled">
        <el-form-item label="一级分类" class="cate_select">
          <el-select placeholder="请选择" v-model="Mycategory1Id" size="small" @click="getCategory2" @change="valueChanege1">
            <el-option :label="item.name" :value="item.id" v-for="item in category1List" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" class="cate_select">
          <el-select placeholder="请选择" value="" size="small" v-model="Mycategory2Id" @change="valueChanege2">
            <el-option :label="item.name" :value="item.id" v-for="item in category2List" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类" class="cate_select">
          <el-select placeholder="请选择" v-model="Mycategory3Id" size="small" @change="valueChanege3">
            <el-option :label="item.name" :value="item.id" v-for="item in category3List" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'HeaderCategory',
  props: ['disabled'],
  data() {
    return {
      Mycategory1Id: this.category1Id,
      Mycategory2Id: this.category2Id,
      Mycategory3Id: this.category3Id,
    }
  },
  methods: {
    // 获取一级分类列表
    async getCategory1() {
      await this.$store.dispatch('getCategory1')
    },
    // 获取二级分类id
    async getCategory2(val) {
      await this.$store.dispatch('getCategory2', val)
    },
    // 获取三级分类id
    async getCategory3(val) {
      await this.$store.dispatch('getCategory3', val)
    },
    // 选择数据发生改变重新给他赋值并且获取id中最新的列表
    valueChanege1(val) {
      this.Mycategory2Id = ''
      this.$store.commit('SET_1ID', val)
      this.$store.dispatch('getCategory2', val)
    },
    valueChanege2(val) {
      this.$store.commit('SET_2ID', val)
      this.$store.dispatch('getCategory3', val)
    },
    valueChanege3(val) {
      this.$store.commit('SET_3ID', val)
    },
  },
  async mounted() {
    await this.getCategory1()
    // console.log(this);
  },
  computed: {
    ...mapState({
      category1List: state => state.headercategory.category1List,
      category2List: state => state.headercategory.category2List,
      category3List: state => state.headercategory.category3List,
      category1Id: state => state.headercategory.category1Id,
      category2Id: state => state.headercategory.category2Id,
      category3Id: state => state.headercategory.category3Id,
    })
  },
  watch: {
    category1Id: {
      handler(val) {
        this.Mycategory1Id = val
        this.$store.dispatch('getCategory1')
      },
      immediate: true,
    },
    category2Id: {
      handler(val) {
        this.Mycategory2Id = val
      },
      immediate: true,
    },
    category3Id: {
      handler(val) {
        this.Mycategory3Id = val
      },
      immediate: true,
    }
  },

}
</script>

<style scoped>
.cate_select {
  margin-left: 20px;
}
</style>
